<!DOCTYPE html>

<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<script id="template/accordion/accordion.html" type="text/ng-template">
    <div class="accordion" ng-transclude></div>
</script>

<script id="template/accordion/accordion-group.html" type="text/ng-template">
    <div class="accordion-group">
        <div class="accordion-heading" style="margin-bottom:0; border-bottom:0">
            <a style="bottom:0" class="accordion-toggle" ng-class="{'collapsed':!isOpen,'open':isOpen}" ng-click="isOpen = !isOpen" accordion-transclude="heading">{{heading}}</a>
        </div>
        <div class="accordion-body" style="display:block; margin-bottom:0" collapse="!isOpen">

            <div class="accordion-inner" ng-transclude></div>  </div>
    </div>
</script>

<h2><span openlmis-message="label.stocked.out"></span></h2>
<div class="row-fluid">
    <div class="span12">
        <ng-include src="'/public/pages/dashboard/shared/dashboard-form.html'"></ng-include>
        <ng-include src="'/public/pages/dashboard/shared/alerts.html'"></ng-include>
    </div>
</div>

<div class="app-form">
    <h2 openlmis-message="title.facilities.stock.out.district|2"></h2>
    <div class="row-fluid">
        <div class="span6">
            <table class="table table-bordered" ng-show="datarows == undefined || datarows.length == 0">
            <tr>
                <td>No data to show under selected filters</td>
            </tr>
            </table>
            <div ng-show ="datarows !== undefined && datarows.length > 0">
                <table ng-show="datarows.length > 0" class="table-bordered table table-striped pull-right"
                       ng-table="tableParams">
                    <tbody>
                    <tr ng-repeat="row in datarows">
                        <td data-title="'District'" sortable="facility"  >{{row.location}}</td>
                        <td data-title="'Existing Facilities'" class="number" >{{row.totalGeoFacility | number}}</td>
                        <td data-title="'Facility Count'" class="number" >{{row.totalStockOut | number}}</td>
                        <td data-title="'%'" class="number">{{getFacilityStockOutPercent(row.totalStockOut)}}</td>
                    </tr>
                    <tr style="font-weight: bold"><td openlmis-message="label.total.facilities.stock.out|2"></td><td colspan="2" class="number">{{totalStockOuts}}</td><td></td></tr>
                    </tbody>
                </table>
            </div>

        </div>
        <div class="span6">
            <div ng-show="stockedOutPieChartData == undefined">
                <label class="chart-note">
                    No data to render chart
                </label>
            </div>
            <div ng-show ="stockedOutPieChartData != undefined">
                <table>
                    <tr>
                        <td><a-float id="stocked-out-reporting" af-option="stockedOutPieChartOption" af-data="stockedOutPieChartData" class="chart"></a-float></td>
                        <td><div style="padding: 0px; margin: 0px;" id="stockedOutReportLegend" class="chartLegend"></div></td>
                    </tr>
                </table>

                <div style="margin-left: 10px; padding-left: 15px;font-weight: bold;" >
                    <span openlmis-message="label.total.facilities.stock.out|2"></span><span> : {{totalStockOuts}}</span>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="flotTip"></div>